layui.use(['form', 'table', 'layer', 'jquery'], function(){
    var form = layui.form;
    var table = layui.table;
    var layer = layui.layer;
    var $ = layui.jquery;
    let cols = [
		[
			{
				title: '支付方式',
				field: 'type_name',
				align: 'center',
				width: 100
			},
			{
				title: '当前状态',
				field: 'status',
				align: 'center',
				templet:function(d){
				    return d.status == 1 ? '正常' : '已过期或未开通'
				}
			},
			{
				title: '会员操作',
				field: 'operation',
				align: 'center',
				templet: function(d){
				    return `<button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="renew">${d.status == 1 ? "续费" : "开通"}</button>`
				}
			},
			{
				title: '会员时间',
				field: 'expire_time',
				align: 'center',
			}
		]
	]
	table.render({
		elem: '#vip_table',
		url: './ajax/typevipgetDataList',
		page: false,
		cols: cols,
		cellMinWidth: 170,
		skin: 'line',
		toolbar: '#user-toolbar',
		defaultToolbar: [{
			title: '刷新',
			layEvent: 'refresh',
			icon: 'layui-icon-refresh',
		}, 'filter', 'print', 'exports']
	});
	table.on('tool(vip_table)', function(obj){
        var data = obj.data;
        if(obj.event === 'renew'){
            window.typemember(obj);
        }
    });
    table.on('toolbar(vip_table)', function(obj) {
		if (obj.event === 'refresh') {
			window.refresh();
		} 
	});
    // 充值提交事件
    form.on('submit(recharge)', function(data){
        $.ajax({
            url: './ajax/topup_money',
            type: 'POST',
            data: data.field,
            dataType: 'json',
            success: function(res){
                if(res.code === 200){
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        window.location.href = res.pay_url;
                    });
                    
                }else{
                    layer.msg(res.msg || '拉起支付失败', {icon: 2});
                }
            },
            error: function(){
                layer.msg('服务器错误', {icon: 2});
            }
        });
        return false; // 阻止表单跳转
    });
    
    
    window.typemember = function(obj){
        var data = obj.data;
        // 打开支付方式选择弹窗
        layer.open({
        type: 1,
        title: false,
        closeBtn: 0,
        area: ['620px', '380px'],
        content: `
            <div class="payment-container">
                <div class="payment-header">
                    <h3>选择支付方式</h3>
                    <i class="layui-icon layui-icon-close payment-close"></i>
                </div>
                <form class="layui-form" lay-filter="paymentForm" onsubmit="return false;">
                    <div class="payment-options">
                        <div class="payment-item" data-value="alipay">
                            <img src="/assets/icon/alipay.ico" alt="支付宝">
                            <div class="payment-name">支付宝支付</div>
                            <input type="radio" name="payment" value="alipay" checked hidden>
                            <div class="payment-check">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="payment-item" data-value="wxpay">
                            <img src="/assets/icon/wxpay.ico?v=1.0.1" alt="微信">
                            <div class="payment-name">微信支付</div>
                            <input type="radio" name="payment" value="wxpay" hidden>
                            <div class="payment-check">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        <div class="payment-item" data-value="qqpay">
                            <img src="/assets/icon/qqpay.ico" alt="QQ">
                            <div class="payment-name">QQ支付</div>
                            <input type="radio" name="payment" value="qqpay" hidden>
                            <div class="payment-check">
                                <i class="layui-icon layui-icon-ok"></i>
                            </div>
                        </div>
                        
                    </div>
                    <div class="payment-footer">
                        <button type="submit" class="payment-submit" lay-submit lay-filter="confirmPayment">
                            立即支付
                        </button>
                    </div>
                </form>
            </div>
        `,
        success: function(){
               $('.payment-close').click(function(){
                    layer.closeAll();
                });

                // 点击支付方式
                $('.payment-item').click(function(){
                    $('.payment-item').removeClass('active');
                    $(this).addClass('active');
                    $(this).find('input[type="radio"]').prop('checked', true);
                    form.render('radio');
                });

                // 默认选中第一个
                $('.payment-item:first').addClass('active');
                
                $(document).on('submit', '.layui-form', function(e){
                    e.preventDefault();  // 阻止表单默认提交
                    return false;
                });
                form.render('radio');
                
            }
        });

        // 监听支付表单提交
        form.on('submit(confirmPayment)', function(formData){
            // 处理开通/续期按钮点击
            $.ajax({
                url: './ajax/member_renew',
                type: 'POST',
                data: {
                    pay_type: formData.field.payment,
                    type: data.type 
                },
                dataType: 'json',
                success: function(res){
                    if(res.code === 200){
                        layer.closeAll(); // 关闭所有弹窗
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        }, function() {
                            window.location.href = res.pay_url;
                        });
                    }else{
                        layer.msg(res.msg || '拉起支付失败', {icon: 2});
                    }
                },
                error: function(){
                    layer.msg('服务器错误', {icon: 2});
                }
            });
            return false; // 阻止表单跳转
        });
    }
    window.refresh = function(param) {
		table.reload('vip_table');
	}
});